<template>
  <view class="content">
    <narbar title="确认订单"></narbar>
    <!-- 地址 -->
    <view class="address" @click="openAddress">
      <view style="display: flex; align-items: center">
        <view v-if="addrResult.length <= 0" style="display: flex">
          <u-icon size="18" name="map"></u-icon>
          <text style="margin-left: 10rpx">请选择收货地址</text>
        </view>

        <view v-else style="display: flex; align-items: start; flex-direction: column">
          <view v-for="(item, index) in addrResult" :key="index" style="display: flex; align-items: start">
            <u-icon size="18" name="map"></u-icon>
            <view style="display: flex; flex-direction: column; margin-left: 10rpx">
              <view style="display: flex; align-items: center">
                <text style="font-weight: 600; font-size: 28rpx">{{ item.realName }}</text>
                <text style="margin-left: 30rpx">{{ item.phone }}</text>
              </view>
              <view style="margin-top: 10rpx; color: #b1b1b1; font-size: 24rpx"> {{ item.region }}{{ item.detail }}</view>
            </view>
          </view>
        </view>
      </view>

      <u-icon size="14" name="arrow-right"></u-icon>
    </view>
    <!-- 商品卡片 -->
    <view class="product-container" v-for="(item, index) in info" :key="index">
      <!-- 内容区 -->
      <view class="product-content">
        <view class="product-image">
          <image :src="item.skuImage"></image>
        </view>
        <view class="product-info">
          <view class="product-info-header">
            <view class="title">{{ item.goodsName }}</view>
            <view class="sku_nn">
              <view class="sku_name">{{ item.skuName }}</view>
              <view class="sku_num">×{{ item.num }}</view>
            </view>
          </view>
        </view>

        <view class="sku_price">
          <text style="font-size: 22rpx; color: #d23000"> 实付：￥</text>
          <text class="price">{{ item.skuPresentPrice * item.num }}</text>
        </view>
      </view>
    </view>

    <view class="order_info">
      <view class="info_title">订单明细</view>
      <view class="info_item">
        <text class="info_item_title">商品总价</text>
        <text class="info_item_price">￥{{ orderPrices.total }}</text>
      </view>

      <view class="info_item">
        <text class="info_item_title">运费</text>
        <text class="info_item_price">￥{{ orderPrices.freight }}</text>
      </view>

      <view class="info_item">
        <text class="info_item_title">实付总价</text>
        <text class="info_item_price">￥{{ orderPrices.realTotal }}</text>
      </view>
    </view>

    <view class="order_info">
      <u-input placeholder="请输入订单备注" border="surround" v-model="remark">
        <template #prefix>
          <u-text text="订单备注" margin="0 3px 0 0" type="tips"></u-text>
        </template>
      </u-input>
    </view>

    <view class="pay_info">
      <view style="display: flex; align-items: center">
        <image :src="patTypeIcon" class="pay_type_icon"></image>
        <text style="font-size: 33rpx; margin-left: 10rpx">{{ appType == 0 ? "支付宝" : "微信" }}</text>
      </view>

      <view>
        <u-checkbox-group>
          <u-checkbox :key="0" :name="0" checked shape="circle" disabled />
        </u-checkbox-group>
      </view>
    </view>
  </view>

  <view class="bottom_footer">
    <view class="submit_price"
      >合计：<text class="price">￥{{ orderPrices.realTotal }}</text>
    </view>
    <view class="submit_btn" @click="submit">提交订单</view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import narbar from "@/components/narbar.vue";
import { doOrderBuy } from "@/utils/api";

const addressInfo = ref(null);
const info = ref();
const patTypeIcon = ref();
//0:支付宝 1：微信
const appType = ref(0);
const orderPrices = reactive({
  total: 0, //商品总价
  freight: 0, //运费
  realTotal: 0, //实付总价
});
const remark = ref();
// 后面页面识别出来的地址，多个
const addrResult = ref([]);

onShow(() => {
  if (uni.getStorageSync("addrResult")) {
    addrResult.value = JSON.parse(uni.getStorageSync("addrResult"));
  }
});

onLoad((option) => {
  if (uni.getStorageSync("addressInfo")) {
    addressInfo.value = uni.getStorageSync("addressInfo");
  }

  info.value = JSON.parse(decodeURIComponent(option.info));

  info.value.forEach((item) => {
    orderPrices.total += Number(item.skuPresentPrice) * item.num; //总价
  });

  //运费
  orderPrices.freight = Number(info.value[0].baseFreight) + Number(info.value[0].additionalFreight);
  //实付
  orderPrices.realTotal = (Number(orderPrices.total) + Number(orderPrices.freight)).toFixed(2);

  //支付图标
  appType.value = uni.getSystemInfoSync().uniPlatform == "mp-alipay" ? 0 : 1;
  patTypeIcon.value = appType.value == 0 ? "../../static/alipay.png" : "../../static/wechat.png";
});

function openAddress() {
  uni.navigateTo({
    url: "/pages/goodsDetail/chooseAddr",
  });
  // uni.chooseAddress({
  //   success(res) {
  //     if (res.userName) {
  //       addressInfo.value = res;
  //       uni.setStorageSync("addressInfo", addressInfo.value);
  //     }
  //   },
  //   fail(e) {
  //     console.log("🚀 ~ fail ~ e:", e);
  //   },
  // });
}

async function submit() {
  if (!addressInfo.value || !addressInfo.value.userName || !addressInfo.value.telNumber || !addressInfo.value.detailInfo) {
    uni.showToast({
      title: "请选择收货地址",
    });
    return;
  }

  let skuList = [];
  info.value.forEach((item) => {
    skuList.push({
      goodsId: item.goodsId,
      skuId: item.skuId,
      skuPresentPrice: item.skuPresentPrice * 100,
      skuOriginalPrice: item.skuOriginalPrice * 100,
      skuNum: item.num,
    });
  });

  const type = uni.getSystemInfoSync().uniPlatform;
  let par = {
    fromType: 0, //0：私域订单；1：公域订单
    payType: type == "mp-alipay" ? 0 : 1, //0：支付宝；1：微信
    orderAmount: orderPrices.realTotal * 100, //订单总金额,单位分
    goodsAmount: orderPrices.total * 100, //商品金额
    expressAmount: orderPrices.freight * 100, //运费
    payAmount: orderPrices.realTotal * 100, //支付金额,单位分
    consigneeName: addressInfo.value.userName, //收货人姓名
    consigneePhone: addressInfo.value.telNumber, //收货人联系方式
    consigneeAddress: addressInfo.value.detailInfo, //收货人地址
    consigneeRemark: remark.value, //收货人备注
    freightId: info.value[0].freightId, //运费模板ID
    skuList: skuList,
  };
  let { code, data } = await doOrderBuy(par);
  if (code == 200) {
    uni.requestPayment({
      provider: "alipay",
      orderInfo: data.tradeNo, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
      // orderInfo: "2023101122001409411406529490", //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
      success: function (res) {
        console.log("success:" + JSON.stringify(res));
        uni.redirectTo({
          url: "/pages/goodsDetail/payResult?orderId=" + data.orderId,
        });
      },
      fail: function (err) {
        console.log("fail:" + JSON.stringify(err));
      },
    });
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 30rpx;
  font-size: 24rpx;
  background-color: #f6f6f6;
  padding-bottom: 200rpx;
}

.address {
  display: flex;
  justify-content: space-between;
  // font-size: 24rpx;
  align-items: center;
  padding: 20rpx;
  box-shadow: 0 0 3rpx rgba($color: #000000, $alpha: 0.1);
  border-radius: 10rpx;
  background-color: white;
}

.product-container {
  padding: 20rpx;
  background-color: white;
  border-radius: 10rpx;
  margin: 20rpx 0;

  // 头部
  .product-header-container {
    padding: 20rpx 0;
    display: flex;
    align-items: center;

    .product-logo {
      width: 39rpx;
      height: 39rpx;
      // background-color: red;
      margin-right: 21rpx;
    }

    .product-title {
      font-size: 25rpx;
      font-weight: bold;
    }
  }

  // 内容区
  .product-content {
    position: relative;
    height: 100%;
    margin-top: 21rpx;
    display: flex;
    justify-content: space-between;

    .product-image image {
      width: 170rpx;
      height: 170rpx;
      // background-color: red;
      margin-right: 30rpx;
    }

    .product-info {
      width: calc(100% - 200rpx);
      height: 100%;

      .product-info-header {
        .title {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-weight: bold;
        }
      }

      // background-color: red;
    }
  }
}

.sku_name {
  font-size: 22rpx;
  color: #999999;
}

.sku_nn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
}

.sku_num {
  margin-right: 10rpx;
}

.price {
  font-size: 48rpx;
  color: #d23000;
  font-weight: 600;
}

.sku_price {
  position: absolute;
  right: 0;
  bottom: 0em;
}

.order_info {
  background-color: white;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.info_title {
  font-size: 33rpx;
  font-weight: 600;
  margin-bottom: 30rpx;
}

.info_item {
  height: 80rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info_item_title {
  font-size: 28rpx;
}

.info_item_price {
  font-size: 34rpx;
  font-weight: 600;
}

.pay_info {
  background-color: white;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pay_type_icon {
  width: 50rpx;
  height: 50rpx;
}

.bottom_footer {
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 150rpx;
  background-color: white;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 5rpx rgba($color: #000000, $alpha: 0.3);
}

.submit_price {
  margin-left: 30rpx;
}

.submit_btn {
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 100rpx;
  background-color: red;
  color: white;
  padding-left: 40rpx;
  padding-right: 40rpx;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  margin-right: 30rpx;
}
</style>
